<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>内容部保修</title>
    <link href="../../../css/common.css" rel="stylesheet"/>
    <link href="../../../css/mui.min.css" rel="stylesheet"/>
    <link href="../../../css/mui.picker.min.css" rel="stylesheet"/>
    <link href="../../../css/mui.poppicker.css" rel="stylesheet"/>
    <link href="../../../css/order/orderDetail.css" rel="stylesheet"/>


    <script src="../../../js/vue.min.js"></script>
    <script src="../../../js/mui.min.js"></script>
    <script src="../../../js/mui-componets.js"></script>
    <script src="../../../js/fastclick.js"></script>
    <script src="../../../js/vue-common.js"></script>
    <script src="../../../js/mui.picker.min.js"></script>
    <script src="../../../js/mui.poppicker.js"></script>
    <script src="../../../js/api.js"></script>
    <script src="../../../js/common.js"></script>

</head>
<body>
<div id="app">
    <div class="header-nav">
        <span>故障信息</span>
        <div class="icon"><img src="../../../img/common/btn_back.png" alt=""></div>
    </div>

    <div class="container">
        <div class="card-box order-info">
            <div class="order-title">机具信息</div>
            <div>
                {{ device.atmCode}}-{{device.modelCode}}-{{device.atmInsSide}}-{{ device.serialNumber}}
            </div>
        </div>
        <div class="card-box order-info">
            <div class="order-title">网点人员</div>
            <div>
                <span v-for="(item,index) in dotBankUsrs">
                    {{item.name}}
                    <span v-if="index != dotBankUsrs.length -1">,</span>
                </span>
            </div>
        </div>
        <div class="card-box device-info">
            <span class="label-light ">故障模块</span>
            <ls-multi-select :type-map="errorTypeMap" v-model="form.errorType" />
        </div>

        <div class="card-box li">
            <div class="card-box device-info">
                <div class="order-title">故障描述</div>
                <div>
                    <textarea v-model="form.errorDescribe" class="text-area" placeholder="请详细描写机具出现的故障"></textarea>
                </div>

            </div>
        </div>

        <div @touchstart="addOrder" :class="{disabled:submitFlag}" class="xl-btn normal no-shadow">提交</div>
    </div>

    <xlb-modal v-model="confirmMod" >
        <div class="dialog-content" slot="content">确认不填写故障描述吗？</div>
        <div slot="footer-left">取消</div>
        <div @click="doConfirm" slot="footer-right">确定</div>
    </xlb-modal>
</div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            confirmMod:false,
            code: '',
            showFlg: false,
            submitFlag: false,

            /**
             * 机具编码
             */
            deviceCode: '',
            /**
             * 设备
             */
            device: {
                id: '',
                atmCode: '',
                modelCode: '',
                atmInsSide:'',
                serialNumber: ''
            },
            /**
             * 故障模块map
             */
            errorTypeMap: {
                '1': '测试',
                '2': '2222',
            },
            /**
             * 故障图片展示
             */
            errorImgShow: [],
            /**
             * 故障状态map
             */
            errorStatusMap: {
                '1': '不能使用',
                '2': '可以使用',
            },
            dotBankUsrs:[], //  网点人员
            //表单参数
            form: {

                /**
                 * 故障图片
                 */
                errorImg: [],
                /**
                 * 选择的故障模块
                 */
                errorType: [],
                /**
                 * 故障状态
                 */
                errorStatus: '',
                /**
                 * 故障描述
                 */
                errorDescribe: '',
                abutmentUserId: '',

            },
            abutmentUserName: '未填写',
            submitParams:''


        },
        methods: {
            getDeviceInfo: function (code) {
                Resource.post(DEVICE_INLINE_API, {code: code}, function (res) {
                    //故障模块
                    vm.errorTypeMap = res.errorUnTypeMap;
                    //设备
                    vm.device = buildDeviceInfo(res);
                    vm.dotBankUsrs = res.dotBankUsrs;

                })
            },
            //生成订单
            addOrder: function () {
                if (this.submitFlag) {
                    return;
                }
                if (!this.device.id) {//校验机具ID
                    return mui.toast("请选择报修设备");
                }
                if (!this.form.errorType.length) {
                    return mui.toast("请选择故障模块");
                }
                if (!this.form.errorDescribe) {
                    this.confirmMod = true;
                } else {
                    vm.doSaveOrder();
                }


            },
            doConfirm: function(){
                if (this.submitFlag) {
                    return;
                }
                if (!this.device.id) {//校验机具ID
                    return mui.toast("请选择报修设备");
                }
                if (!this.form.errorType.length) {
                    return mui.toast("请选择故障模块");
                }
                vm.doSaveOrder();

            },
            doSaveOrder: function () {
                var params = {
                    deviceId: this.device.id,
                    /**
                     * 选择的故障模块
                     */
                    errorType: this.form.errorType + '',
                    /**
                     * 故障描述
                     */
                    errorDescribe: this.form.errorDescribe,
                    /**
                     * 人员通知
                     */
                    insideUsrIds: this.device.insideUsrIds

                }
                console.log(JSON.stringify(params));
                if(!params){
                    params= this.submitParams;
                }
                this.submitFlag = true;
                this.btnTitle = '提交中',
                    Resource.post(ORDER_ADD_INLINE_API, params, function (res) {
                        mui.toast('报修成功！')
                        vm.showFlg = false;
                        vm.submitFlag = false;
                        //跳转订单页面
                        redirectMainPage('pages/order/list.html');
                    },function () {
                        vm.showFlg = false;
                        vm.submitFlag = false;
                    })
            },
            //重置参数
            resetForm: function () {
                this.deviceCode = '';
                this.device = {
                    id: '',
                    insSide: '',
                    typeName: '',
                };
                this.errorTypeMap = {};
                this.errorImgShow = [];
                this.errorStatusMap = {};
                this.form = {
                    errorImg: [],

                    errorType: [],

                    errorStatus: '',

                    errorDescribe: '',
                    dateDate: '',

                    limitDate: '',

                    abutmentUserId: '',

                };
            },
            goContact: function () {
                redirect('pages/order/contact/index.html')
            }
        }
    });

    /**
     * 构建机具信息
     * @param data
     * @returns {{id: string, atmCode: *, modelCode: string, atmInsSide: string, serialNumber: string, insideUsrIds}}
     */
    function buildDeviceInfo(data) {
        return {
            id: data.device.id,
            atmCode: data.device.code,
            modelCode: data.device.modelCode,
            atmInsSide:data.device.insSide,
            serialNumber: data.device.serialNumber,
            insideUsrIds:buildInsidUsrIds(data.dotBankUsrs)
        }
    }

    /**
     * 创建网点人员通知信息
     */
    function buildInsidUsrIds(data) {
        console.log(JSON.stringify(data))
        var result =[];
        for (var i = 0; i < data.length ; i++) {
            result.push(data[i].id);
        }
        return result+'';
    }
</script>
<script>

    mui.plusReady(function (data) {
        var self = plus.webview.currentWebview();
        vm.code = self.code;
        vm.getDeviceInfo(self.code);
        vm.showFlg = false;
    });

    document.addEventListener('changeTab', function (data) {
        vm.imgServer = getImgServer();
        vm.resetForm()
        vm.showFlg = false;
        var code = data.detail.params.code;
        vm.getDeviceInfo(code);

    })

    mui.init({
        beforeback: function () {
            if(vm.imgShow){
                return vm.imgShow = false;
            }
            return true;
        }
    });
</script>

</body>
</html>